*{
    box-sizing: border-box;
   margin: 0;
   padding: 0;
}

.wh{
    width: 100%;
    height:100%
}
ol,ul{
    list-style: none;
}
html,body{
   .wh;

}

@mainColor:lightblue;



.nav {
     width: 100%;
     height: 64px;
     background-color: @mainColor;
     position: fixed;
     line-height: 64px;
     z-index:900 ;
}
header:extend(.nav){
    top:0;   
}
footer:extend(.nav){
    height: 44px;
    bottom:0;
}

.guard{
    .wh;
    display: none;
    position: absolute;
    z-index: 1000;
  
    top: 64px;
}

.colorChange{
     color: white;
     background-color: #ccc;
     transition: background-color color  linear ;
}

article{
   .wh;
   height: 100%;
    position: absolute;
    z-index: 900;
    box-shadow: 0 0 5px black;
   
    header button{
        margin-top: 15px;
    }
    header div {
        text-align: center;
        color: white;
         font-size: 20px;
    }
    .aStyle{
        width: 40px;
        height: 40px;
        margin-top:13px ;
        line-height: 40px;
        border-radius: 50%;
        background-color: white;
        color: black;
        &:hover{
           .colorChange;
        }
    }
    .main{
        .wh;
        overflow: scroll;
        background-color: lightcoral;
        margin: 64px 0 40px;
        background-color: white;
        .img-use{
            width: 50px;
            height: 50px;
            border-radius:50% ;
        }
        img{
            max-width: 100px;
            max-height: 100px;
        }
        .panel {
            margin: 20px 0;
        }
    }
    
    footer{

        ul{
             line-height: 44px;
            margin-left: 10px;
            margin-right: 10px;
            li{
              float: left;
              width:33%;
              text-align: center;
              &:hover{
                  background-color: white;
                  a{color: @mainColor};
              }        
                 a{
                     color: white;
                      font-size: 20px;
                      &:hover{
                          color: @mainColor;
                      }
                   }
               }
 
         }      
     }  
}
aside {
    .wh;
  
    position: absolute;
    z-index: 800;
    header{
                 font-size:20px ;
                 color: white;
            a{
               width: 30px;
               height: 30px;
               margin-top: 15px;
               border-radius: 50%;
               background-color: white;
               line-height: 30px;
               font-size: 18px;
               text-align: center;
               &:hover {
                   .colorChange;
               }
            }
    }
   
      
        .panel-heading{
            position: fixed;
            top:64px;
            width: 100%;
            z-index: 800;
            background-color: white;
            background: rgba(0,0,0,0.2);
          
        }
        .panel-body{        
            margin-top: 100px;
            margin-bottom: 45px;
           
        }
        

}

#nav{
     position: absolute;
    bottom:20px;
    z-index: 1000;
 }


  














